<!--  -->
<template>
	<view class="ecologicalIndex">
		<view class="item" @click="go(1)">
			<view class="left"><image class="image" src="@/static/monitor/Soiltesting.png" mode="aspectFit"></image></view>
			<view class="right">
				<text class="title">土壤指数</text>
				<text class="subtitle">指数数据仅供参考</text>
			</view>
		</view>
		<view class="item" @click="go(2)">
			<view class="left"><image class="image" src="@/static/monitor/waterqualitymonitoring.png" mode="aspectFit"></image></view>
			<view class="right">
				<text class="title">水质指数</text>
				<text class="subtitle">指数数据仅供参考</text>
			</view>
		</view>
		<view class="item" @click="go(3)">
			<view class="left"><image class="image" src="@/static/monitor/Vegetationmonitoring.png" mode="aspectFit"></image></view>
			<view class="right">
				<text class="title">植被指数</text>
				<text class="subtitle">指数数据仅供参考</text>
			</view>
		</view>
		<view class="item" @click="go(4)">
			<view class="left"><image class="image" src="@/static/monitor/Microbialmonitoring.png" mode="aspectFit"></image></view>
			<view class="right">
				<text class="title">微生物指数</text>
				<text class="subtitle">指数数据仅供参考</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ecologicalIndex',
	data() {
		return {};
	},
	onReady() {},
	onLoad() {},
	methods: {
		go(testingType) {
			uni.navigateTo({
				url: '/pages/monitor/map/ecologicalMap?testingType=' + testingType
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.ecologicalIndex {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 21rpx 30rpx;
	box-sizing: border-box;
	background-color: transparent;
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 23rpx 78rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		.left {
			.image {
				width: 184rpx;
				height: 184rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: space-between;
			margin-left: 122rpx;
			.title {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.subtitle {
				margin-top: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}
}
</style>
